<!DOCTYPE html>
<html>

<head>

  <meta charset="UTF-8">

  <title>Responsive Multi-level Nav (forked) &middot; CodePen</title>

  <meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="estilo.css" type="text/css" media="screen" />

<style>
body, nav, ul, li, a  {margin: 0; padding: 0;}
body {font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
a {text-decoration: none;}
* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.gradient {
	border-right:1px solid #5d5d5d;
    border-left:1px solid #929292;
    border-bottom:1px solid #575757;
    border-top:1px solid #797979;

	background: rgb(131,131,131); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(131,131,131,1) 0%, rgba(112,112,112,1) 49%, rgba(94,94,94,1) 50%, rgba(120,120,120,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(131,131,131,1)), color-stop(49%,rgba(112,112,112,1)), color-stop(50%,rgba(94,94,94,1)), color-stop(100%,rgba(120,120,120,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(131,131,131,1) 0%,rgba(112,112,112,1) 49%,rgba(94,94,94,1) 50%,rgba(120,120,120,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(131,131,131,1) 0%,rgba(112,112,112,1) 49%,rgba(94,94,94,1) 50%,rgba(120,120,120,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(131,131,131,1) 0%,rgba(112,112,112,1) 49%,rgba(94,94,94,1) 50%,rgba(120,120,120,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(131,131,131,1) 0%,rgba(112,112,112,1) 49%,rgba(94,94,94,1) 50%,rgba(120,120,120,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#838383', endColorstr='#787878',GradientType=0 ); /* IE6-9 */
}
#menu {
    height: 50px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}

#menu ul li a {

    text-shadow: 1px 1px 1px #000;

    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;

    -webkit-transition-property: color, background;
    -webkit-transition-duration: 0.5s, 0.5s;
}

#menu ul li a:hover {
    background: #b5243e;
    color: #ff0;
    -webkit-transition-property: color, background;
    -webkit-transition-duration: 0.5s, 0.5s;
}

.default {
    width: 97%;
    box-shadow: 0 5px 20px #888;
    -webkit-box-shadow: 0 5px 20px #888;
    -moz-box-shadow: 0 5px 20px #888;
}

.fixed {
    position: fixed;
    top: -5px;
    left: 0;
    width: 100%;
    box-shadow: 0 0 40px #222;
    -webkit-box-shadow: 0 0 40px #222;
    -moz-box-shadow: 0 0 40px #222;
}
#menu, .toggleMenu {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #000), color-stop(40%, #333), color-stop(100%, #666));
    background: -moz-linear-gradient(top, #000, #333, #666);
    background-color: gray;
    font: normal 13px Verdana, sans-serif;
    color: #222;
        text-align: center;
    margin: 0 auto;
    padding: 0;
    z-index: 2;
}

.toggleMenu {
    display:  none;

    padding: 10px 0;
    color: #fff;
    width: 100%;
}
#mainNav {
	margin: 0 auto;
	padding-top: .7em;
	width: 95%;
}
.nav {
    list-style: none;
     *zoom: 1;
}
.nav:before,
.nav:after {
    content: " ";
    display: table;
}
.nav:after {
    clear: both;
}

.nav ul {
    width: 20em;
    list-style-type: none;
    display: inline;

}
.nav a {
    padding: .5em 0;
    color:#fff;
}
.nav li {
    position: relative;
    margin: .1em 0 0 0;
}
.nav > li {
    float: left;
    width: 16.666%;
}
.nav > li > .parent {
/*    background-image: url("http://webdesigntutsplus.s3.amazonaws.com/tuts/378_tessa/tessa-lt-dropdowns-21c7868/images/downArrow.png");
    background-repeat: no-repeat;
    background-position: right;*/
}
.nav > li > a {
    display: block;
}
.nav li  ul {
    position: absolute;
    left: -9999px;
}
.nav > li.hover > ul {
    left: 0;
    padding-top:1em;
}
.nav li li.hover ul {
    left: 100%;
    top: 0;
    padding-left:.2em;
}
.nav li li a {
    display: block;
    background: #444;
    position: relative;
    z-index:100;
    border-top: 1px solid #000;
}
.nav li li li a {
    background:#666;
    z-index:200;
    border-top: 1px solid #000;
}

@media screen and (max-width: 768px) {
    .active {
        display: block;
    }
    .nav > li {
        float: none;
    }
    .nav > li > .parent {
        background-position: 95% 50%;
    }
    .nav > li > .parent {
	   background-image: none;
    }
    .nav li .more {
        background-image: url("http://webdesigntutsplus.s3.amazonaws.com/tuts/378_tessa/tessa-lt-dropdowns-21c7868/images/downArrow.png");
        background-repeat: no-repeat;
        background-position: 95% 50%;
        float: right;
      	width: 70%;
    		border-left: 1px solid rgba(255,255,255,.3);
    		padding: 8px 15px;
    		margin: 2px 5px 2px 0px;
        cursor: pointer;
    		z-index: 200;
        position: relative;
    }
	.nav li .more:before {
	  content: "";
	  background: rgba(0,0,0,.3);
	  width: 1px;
	  display: block;
	  position: absolute;
	  top: 0;
	  bottom: 0;
	  left: -2px;
	}
    .nav ul {
        display: block;
        width: 100%;
    }
   .nav > li.hover > ul , .nav li li.hover ul {
        position: static;
    }
}
</style>



<script>
// Kill alerts, confirmations and prompts
// window.confirm = function(){};
// window.prompt  = function(){};
// window.open    = function(){};
// window.print   = function(){};
</script>

</head>

<body>


 <div id="menu" class="default">
	<a class="toggleMenu" href="#" style="display: none; ">Menu</a>
	<ul id="mainNav" class="nav" style="">
	  <li class="test">
	    <a href="#" class="parent">Shoes</a>
			<ul>
				<li class="">
					<a href="#" class="parent">Womens</a>
					<ul>
						<li class=""><a href="#">Sandals</a></li>
						<li><a href="#">Sneakers</a></li>
						<li><a href="#">Wedges</a></li>
						<li><a href="#">Heels</a></li>
						<li><a href="#">Loafers</a></li>
						<li><a href="#">Flats</a></li>
					</ul>
				</li>
				<li class="">
					<a href="#" class="parent">Mens</a>
					<ul>
						<li><a href="#">Loafers</a></li>
						<li><a href="#">Sneakers</a></li>
						<li><a href="#">Formal</a></li>
					</ul>
				</li>
			</ul>
		</li>
		<li>
			<a href="#" class="parent">Shirts</a>
			<ul>
				<li>
					<a href="#" class="parent">Mens</a>
					<ul>
						<li><a href="#">T-Shirts</a></li>
						<li><a href="#">Dress Shirts</a></li>
						<li><a href="#">Tank Tops</a></li>
					</ul>
				</li>
				<li>
					<a href="#" class="parent">Womens</a>
					<ul>
						<li><a href="#">T-Shirts</a></li>
						<li><a href="#">Blouses</a></li>
						<li><a href="#">Dress Shirts</a></li>
						<li><a href="#">Tunics</a></li>
						<li><a href="#">Camisoles</a></li>
					</ul>
				</li>
			</ul>
		</li>

		<li class="">
			<a href="#" class="parent">Sweaters</a>
			<ul>
				<li class="">
					<a href="#" class="parent">Mens</a>
					<ul>
						<li><a href="#">Wool</a></li>
						<li><a href="#">Knitwear</a></li>
						<li><a href="#">Light Sweaters</a></li>
						<li><a href="#">Cardigans</a></li>
						<li><a href="#">Hoodies</a></li>
					</ul>
				</li>
				<li class="">
					<a href="#" class="parent">Womens</a>
					<ul>
						<li><a href="#">Wool</a></li>
						<li><a href="#">Knitwear</a></li>
						<li><a href="#">Light Sweaters</a></li>
						<li><a href="#">Cardigans</a></li>
						<li><a href="#">Hoodies</a></li>
					</ul>
				</li>
			</ul>
		</li>
		<li>
			<a href="#" class="parent">Accessories</a>
			<ul>
				<li>
					<a href="#" class="parent">Womens</a>
					<ul>
						<li><a href="#">Belts</a></li>
						<li><a href="#">Bags</a></li>
						<li><a href="#">Jewelery</a></li>
						<li><a href="#">Hats</a></li>
						<li><a href="#">Eyewear</a></li>
					</ul>
				</li>
				<li>
					<a href="#" class="parent">Mens</a>
					<ul>
						<li><a href="#">Belts</a></li>
						<li><a href="#">Hats</a></li>
						<li><a href="#">Eyewear</a></li>
					</ul>
				</li>
			</ul>
		</li>
		<li>
			<a href="#" class="parent">Outerwear</a>
			<ul>
				<li>
					<a href="#" class="parent">Womens</a>
					<ul>
						<li><a href="#">Winter</a></li>
						<li><a href="#">Spring/Fall</a></li>
					</ul>
				</li>
		 		<li>
					<a href="#" class="parent">Mens</a>
					<ul>
						<li><a href="#">Winter</a></li>
						<li><a href="#">Spring/Fall</a></li>
					</ul>
				</li>
			</ul>
		</li>
		<li>
			<a href="#">Shipping Info</a>
		</li>
	</ul>
  </div>

<br /><br /><br /><br />
<br /><br /><br /><br />
<div id="principal">
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
	consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
	cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
	proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
	consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
	cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
	proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
	consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
	cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
	proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
	consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
	cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
	proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
	consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
	cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
	proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
	consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
	cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
	proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
	consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
	cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
	proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
	consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
	cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
	proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</div>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.8.0.min.js"><\/script>')</script>

<script>
(function() {



	  var menu = $('#menu'),
    pos = menu.offset();

    $(window).scroll(function(){
      if($(this).scrollTop() > pos.top+menu.height() && menu.hasClass('default')){
        menu.fadeOut('fast', function(){
          $(this).removeClass('default').addClass('fixed').fadeIn('fast');
        });
      } else if($(this).scrollTop() <= pos.top && menu.hasClass('fixed')){
        menu.fadeOut('fast', function(){
          $(this).removeClass('fixed').addClass('default').fadeIn('fast');
        });
      }
    });







	var ww = document.body.clientWidth;

	$(document).ready(function() {
	  $(".nav li a").each(function() {
	    if ($(this).next().length > 0) {
	    	$(this).addClass("parent");
			};
		})

		$(".toggleMenu").click(function(e) {
			e.preventDefault();
			$(this).toggleClass("active");
			$(".nav").toggle();
		});
		adjustMenu();
	})

	$(window).bind('resize orientationchange', function() {
		ww = document.body.clientWidth;
		adjustMenu();
	});

	var adjustMenu = function() {
		if (ww < 768) {
	    // if "more" link not in DOM, add it
	    if (!$(".more")[0]) {
	    $('<div class="more">&nbsp;</div>').insertBefore($('.parent'));
	    }
			$(".toggleMenu").css("display", "inline-block");
			if (!$(".toggleMenu").hasClass("active")) {
				$(".nav").hide();
			} else {
				$(".nav").show();
			}
			$(".nav li").unbind('mouseenter mouseleave');
			$(".nav li a.parent").unbind('click');
	    $(".nav li .more").unbind('click').bind('click', function() {

				$(this).parent("li").toggleClass("hover");
			});
		}
		else if (ww >= 768) {
	    // remove .more link in desktop view
	    $('.more').remove();
			$(".toggleMenu").css("display", "none");
			$(".nav").show();
			$(".nav li").removeClass("hover");
			$(".nav li a").unbind('click');
			$(".nav li").unbind('mouseenter mouseleave').bind('mouseenter mouseleave', function() {
			 	// must be attached to li so that mouseleave is not triggered when hover over submenu
			 	$(this).toggleClass('hover');
			});
		}
	}

})();
</script>





<script type="text/javascript">
// if (!NREUMQ.f)
// {
// 	NREUMQ.f=function()
// 	{
// 		NREUMQ.push(["load",new Date().getTime()]);
// 		var e=document.createElement("script");
// 		e.type="text/javascript";
// 		e.src=(("http:"===document.location.protocol)?"http:":"https:") + "//" +
// 		  "d1ros97qkrwjf5.cloudfront.net/42/eum/rum.js";
// 		document.body.appendChild(e);
// 		if(NREUMQ.a)NREUMQ.a();
//     };

//     NREUMQ.a=window.onload;window.onload=NREUMQ.f;
// };
// NREUMQ.push(["nrfj","beacon-1.newrelic.com","6e5edccabe",522852,"IgoLR0YJXA1RFxdRRw0JFVJTAx8SXApP",0,386,new Date().getTime(),"","","","",""]);
</script>

</body>

</html>